<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>哆啦A梦</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body {
            color: #686868;
            font-family: "微软雅黑";
        }

        /*导航*/
        #mynav {
            background-color: #2AAAEC;
        }

        #mynav a {
            color: #fff;
            font-weight: bold;
        }

        .navbar-default .navbar-toggle .icon-bar {
            background-color: #fff;
        }

        .navbar-default .navbar-toggle {
            background-color: transparent;
            border: none;
        }

        .navbar-default .navbar-toggle:hover {
            background-color: transparent;
        }

        @media ( max-width: 768px) {
            .myloin {
                position: absolute;
                top: 10px;
                left: 50%;
                font-size: 1em;
            }

            p {
                 font-size: 12px;
             }
            h2{
                font-size: 16px;
            }
            h3 {
                font-size: 14px;
            }
            li{
                font-size: 14px;
            }
            #myP {
                margin-top:10px;
            }
            .myimg{
                width: 50%;
            }
            .div{
            	margin-top: 20px;
            }
        }

        /*主体*/
        .cont {
            height: 300px;
            padding-top: 30px;
        }

        .mysea {
            color: #2AAAEC;
        }

        .myP {
            font-size: 1.2em;
            margin-top: 80px;
        }
        
    </style>
</head>

<body>
<!--网页头部-->
<!--导航-->
<nav class="navbar navbar-default navbar-fixed-top clearfix" id="mynav">
    <div class="container">
        <div class="navbar-header">
            <img class="" src="img/logo.jpg" alt="" width="60px" height="45px" style="margin-top: 2px;"/>
            <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-left">
            <ul class="nav navbar-nav">
                <li><a href="#">首页</a></li>
                <li><a href="#">作品背景</a></li>
                <li><a href="#">故事内容</a></li>
                <li><a href="#">登场角色</a></li>
                <li><a href="#">童年回忆</a></li>
                <li><a href="#">衍生作品</a></li>
            </ul>
        </div>
        <div class="nav navbar-nav navbar-right myloin">
            <a class="navbar-text navbar-link" href="#">登录</a>
            <a class="navbar-text">|</a>
            <a class=" navbar-text navbar-link" href="#">注册</a>
        </div>
    </div>
</nav>
<!--轮播图-->
<div id="carousel" class="carousel slide" data-ride="carousel" style="margin-top: 50px;">
    <!--轮播标志小圆点-->
    <ol class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#carousel"></li>
        <li data-slide-to="1" data-target="#carousel"></li>
        <li data-slide-to="2" data-target="#carousel"></li>
    </ol>
    <!--图片-->
    <div class="carousel-inner img">
        <div class=" item active">
            <a href="#"><img src="img/1.jfif" alt=""  /></a>
        </div>
        <div class=" item ">
            <a href="#"><img src="img/2.jfif" alt=""  /></a>

        </div>
        <div class=" item ">
            <a href="#"><img src="img/3.jfif" alt=""  /></a>

        </div>
    </div>
    <!--左右按钮-->
    <a href="#carousel" class="left carousel-control" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="#carousel" class="right carousel-control" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
<!--网页主体-->
<!--故事内容-->
<div class="container">
    <h3>故事内容</h3>

    <div class="row">
        <div class="col-md-5 col-xs-12">
            <a href="#">
                <img class="img-responsive" src="img/typical.jpg" alt="...">
            </a>
        </div>
        <div class="col-md-7 col-xs-12">
            <p class="myP" id="myP"> 大雄有一天打开自己的课桌，一只猫型机器人突然从抽屉里跳了出来，而这就是哆啦A梦。
            它是由大雄的后代从22世纪里给送来的，目的是帮助大雄解决许多他暂时无法解决的问题，并且尽可能地满足大雄的愿望。
 </p>
        </div>
    </div>
</div>
<!--角色介绍-->
<div class="container">
	 <h3>角色介绍</h3>
    <div class="cont clearfix">
        <div class="col-md-4 col-xs-12 text-center">
            <img class="myimg" src="img/cont1.jfif" alt=""/>

            <h2 class="mysea">哆啦A梦</h2>

        </div>
        <div class="col-md-8 col-xs-12">
            <h3>心肠好，乐于助人，做事很拼命，但却心肠软</h3>

            <p>每次大雄遇到困难，他总会帮大雄。但有时会用愚蠢的方法来帮助大雄。当它吃不到铜锣烧或人们叫他狸猫时，脾气会非常暴躁</p>
            <ul class="col-md-6 col-xs-12">
                <li>没有耳朵</li>
                <li>一双大大的眼睛</li>
                <li>蓝色</li>
            </ul>
            <ul class="col-md-6 col-xs-12">
                <li>胸前有一个铃铛</li>
                <li>喜欢吃东西、喜欢笑、喜欢唱歌</li>
                <li>能给人带来快乐</li>
            </ul>
        </div>
    </div>
    <div class="cont clearfix">
        <div class="col-md-4 col-xs-12 col-md-push-8   text-center">
            <img class="myimg" src="img/cont2.jpg" alt=""/>

            <h2 class="mysea">野比大雄</h2>

        </div>
        <div class="col-md-8 col-xs-12 col-md-pull-4 ">
            <h3>单纯天真的个乐天派，性格懒惰，天生迟钝</h3>

            <p>学习成绩很糟糕，运动神经迟钝，做任何事情都毛手毛脚的，智力和体力只有小学二年级的水平。</p>
            <ul class="col-md-6 col-xs-12">
                <li>富有爱心</li>
                <li>擅长睡觉，只要想睡什么时候都能睡着</li>
                <li>意志力薄弱，没长性</li>
            </ul>
            <ul class="col-md-6 col-xs-12">
                <li>手指灵活</li>
                <li>擅长射击，翻花绳</li>
                <li>对动物，植物，甚至玩具都很有同情心</li>
            </ul>
        </div>
    </div>
    <div class="cont clearfix">
        <div class="col-md-4 col-xs-12 text-center">
            <img class="myimg" src="img/cont3.jpg" alt=""/>

            <h2 class="mysea">静香</h2>

        </div>
        <div class="col-md-8 col-xs-12">
            <h3>聪明乖巧、成绩优秀、心地善良，很受大家的欢迎</h3>

            <p>梦想长大后成为国际航班的空中小姐、幼儿园教师</p>
            <ul class="col-md-6 col-xs-12">
                <li>心地单纯</li>
                <li>可爱，性格温柔</li>
                <li>喜欢吃烤红薯</li>
            </ul>
            <ul class="col-md-6 col-xs-12">
                <li>重情</li>
                <li>浪漫，富于幻想</li>
                <li>活泼、自强、勇敢</li>
            </ul>
        </div>
    </div>
    <div class="cont clearfix">
        <div class="col-md-4 col-xs-12 col-md-push-8   text-center">
            <img class="myimg" src="img/cont4.jfif" alt=""/>

            <h2 class="mysea">胖虎</h2>

        </div>
        <div class="col-md-8 col-xs-12 col-md-pull-4 ">
            <h3>虽然是个粗暴的孩子王，不过很重视友情</h3>

            <p>天生五音不全，有着杀猪般的歌喉，却梦想成为歌星，经常强迫大家来听他的演唱会，他可怕的歌声是大家的噩梦</p>
            <ul class="col-md-6 col-xs-12">
                <li>勇敢、有正义感</li>
                <li>很仗义、很暖心</li>
                <li>善良坚强、在意友情</li>
            </ul>
            <ul class="col-md-6 col-xs-12">
                <li>害怕妈妈</li>
                <li>无自知之明、个性粗暴，容易冲动</li>
                <li>暴力狂，动不动就用武力来解决问题</li>
            </ul>
        </div>
    </div>
    <div class="cont clearfix">
        <div class="col-md-4 col-xs-12 text-center">
            <img class="myimg" src="img/cont5.jpg" alt=""/>

            <h2 class="mysea">小夫</h2>

        </div>
        <div class="col-md-8 col-xs-12">
            <h3>梦想是成为一名服装设计师。喜欢追求流行，兴趣相当多样</h3>

            <p>对自己的长相十分自恋，自我感觉过分良好，唯独对自己的身高太矮小感到苦恼</p>
            <ul class="col-md-6 col-xs-12">
                <li>脑子灵活，方法多</li>
                <li>服装设计上很有天赋，审美在线</li>
                <li>聪明，随机应变的能力也很强</li>
            </ul>
            <ul class="col-md-6 col-xs-12">
                <li>欺软怕硬</li>
                <li>性格自大、骄傲、爱炫耀</li>
                <li>捉弄别人、吹嘘、习惯性地说谎</li>
            </ul>
        </div>
    </div>

</div>
<!--视频-->
<div class="container">
    <div class="video" style="margin-top:30px;">
        <a href="#"><img class="img-responsive" src="img/video.jfif" alt=""/></a>
    </div>
</div>
<!--作品评价-->
<div class=" container prodect">
    <h3>作品评价</h3>

    <div class="row" >
        <div class="col-md-3 col-xs-6">
            <div class="text-center">
                <img src="img/icon1.jpg" alt=""/>

                <p>不愿与你分别的童年</p>
            </div>
            <p>我要靠自己一个人的力量……战胜你……不然小叮当他……是没法放心地回去的!我也想留在你身边，真的好想。</p>
             <a href="#" class="btn bg-primary">了解详情</a>
        </div>
        <div class="col-md-3 col-xs-6">
            <div class="text-center">
                <img src="img/icon2.jpg" alt=""/>

                <p>心中的蓝胖子</p>
            </div>
            <p>大雄，我会保护你，但你也要学会慢慢长大。哆啦a梦走了，大雄学会了自己长大，我们每个人也学会了自己长大。</p>
             <a href="#" class="btn bg-primary">了解详情</a>
        </div>
        <div class="col-md-3 col-xs-6 div" >
            <div class="text-center">
                <img src="img/icon3.jpg" alt=""/>

                <p>最长情的告白</p>
            </div>
            <p>我还是放心不下呀，要是能一直在你身边陪着你，该多好啊!我不在，你也可以好好照顾自己吗?</p>
             <a href="#" class="btn bg-primary">了解详情</a>
        </div>
        <div class="col-md-3 col-xs-6 div" >
            <div class="text-center">
                <img src="img/icon4.jpg" alt=""/>

                <p>每次一看它，我就开心的像儿童</p>
            </div>
            <p>你这个人真是又冒失，又笨，又不爱学习，又懒惰，又迟钝，运动又不行，又胆小，又健忘，又不可靠，又怕麻烦……</p>
             <a href="#" class="btn bg-primary">了解详情</a>
        </div>
    </div>
</div>
<!--网页尾部-->
<div class="footer container" style="margin-top:20px;">
    <hr/>
    <p class="text-center">2020-forever</p>
</div>



<script src="js/jquery-1.10.2.min.js"></script>
<script src='js/bootstrap.min.js'></script>

<script>

</script>
</body>
</html>